<template>
	<view>
		<view class='searchGood'>
			<view class='search acea-row row-between-wrapper'>
				<view class='input acea-row row-between-wrapper'>
					<text class='iconfont icon-sousuo2'></text>
					<input type='text' :value='searchValue' :focus="focus" placeholder='点击搜索商品、店铺名称' placeholder-class='placeholder'
					 @input="setValue"></input>
					 <view class='bnt' @tap='searchBut'>搜索</view>
				</view>
			</view>
			
			<view class="tabNav">
				<div class="tabNav-item" v-for="(item, index) in searchList" :key="index" @click="searchContent(item.type)">
					<div class="tabNav-item-name" :class="searchType == item.type ? 'on' : ''">{{item.name}}</div>
				</div>
			</view>
			<view class="search-list-content" v-if="searchValue && hotSearchList.length">
				<demand :list="hotSearchList" v-if="searchType == 3"></demand>
				<service :list="hotSearchList" :type="2" v-if="searchType == 1"></service>
				<userItem :list="hotSearchList" v-if="searchType == 4"></userItem>
				<circleItem :list="hotSearchList" v-if="searchType == 5"></circleItem>
			</view>
			<emptyPage v-else title="正在加载中···"></emptyPage>
		</view>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse" :isGoIndex="false"></authorize>
		<!-- #ifndef H5 -->
		<passwordPopup></passwordPopup>
		<!-- #endif -->
	</view>
</template>

<script>
	 
	import { getSearchKeyword,copyPasswordSearch } from '@/api/store.js';
	import { recommendCustom } from '@/api/user.js';
	import { getListCircle, recommendCommunity } from '@/api/circle.js'
	import shareScence from '@/libs/spread';
	import { silenceBindingSpread } from '@/utils';
	import { goShopDetail } from '@/libs/order.js';
	import { initiateAssistApi } from '@/api/activity.js';
	import { mapGetters } from 'vuex';
	// #ifndef H5
	import passwordPopup from '@/components/passwordPopup';
	// #endif
    import authorize from '@/components/Authorize';
	import service from '@/components/service/index.vue';
	import demand from '@/components/demand/index.vue';
	import userItem from '@/components/user_item/index.vue';
	import circleItem from '@/components/circle_item/index.vue';
	import emptyPage from '@/components/emptyPage.vue'
	export default {
		computed: mapGetters(['isLogin', 'uid']),
		components: {
			// #ifndef H5
			passwordPopup,
			// #endif
            authorize,
			service,
			demand,
			userItem,
			circleItem,
			emptyPage,
		},
		data() {
			return {
				searchValue: '',
				focus: true,
				hotSearchList: [],
				limit: 10,
				page: 1,
				loading: true,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				searchList: [
					{
						name: '需求',
						type: 3,
					},
					{
						name: '服务',
						type: 1,
					},
					{
						name: '客户',
						type: 4,
					},
					{
						name: '圈子',
						type: 5,
					},
				],
				searchType: 3,
			};
		},
		onLoad(options) {
			this.searchValue = options.searchVal || ''
		},
		onShow: function() {
		},
		methods: {
			// 微信登录回调
			onLoadFun: function(e) {
				this.isShowAuth = false;
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},
			// 切换搜索内容类型
			searchContent(index) {
				this.loading = true;
				this.page = 1;
				this.hotSearchList = [];
				this.searchType = index;
				this.searchBut();
			},
			setValue: function(event) {
				this.loading = true;
				this.page = 1;
				this.hotSearchList = [];
				this.$set(this, 'searchValue', event.detail.value);
			},
			searchBut: function() {
				let that = this;
				if(!that.searchValue) return that.$util.Tips({title: '搜索内容不能为空'});
				if(!that.loading) return false;
				let data = {
					page: that.page,
					limit: that.limit,
					keyword: that.searchValue,
				}
				if(that.searchType == 5) {
					// 搜索圈子
					getListCircle(data).then(res => {
						if(res.status == 200)
						{
							that.hotSearchList = that.hotSearchList.concat(res.data.list)
							that.loading = res.data.list.length >= that.limit;
							that.page++
						}
					}).catch(err=>{
						that.$util.Tips({title: err});
					})
				} else if(that.searchType == 4) {
					// 搜索客户
					data.limit = 30;
					recommendCustom(data).then(res => {
						if(res.status == 200)
						{
							that.hotSearchList = that.hotSearchList.concat(res.data.list)
							that.loading = res.data.list.length >= 30;
							that.page++
						}
					}).catch(err=>{
						that.$util.Tips({title: err});
					})
				} else if(that.searchType == 3) {
					// 搜索需求
					data.is_type = 3
					recommendCommunity(data).then(res => {
						if(res.status == 200)
						{
							that.hotSearchList = that.hotSearchList.concat(res.data.list)
							that.loading = res.data.list.length >= that.limit;
							that.page++
						}
					}).catch(err=>{
						that.$util.Tips({title: err});
					})
				} else if(that.searchType == 2) {
					// 搜索视频
					data.is_type = 2
					recommendCommunity(data).then(res => {
						if(res.status == 200)
						{
							that.hotSearchList = that.hotSearchList.concat(res.data.list)
							that.loading = res.data.list.length >= that.limit;
							that.page++
						}
					}).catch(err=>{
						that.$util.Tips({title: err});
					})
				} else if(that.searchType == 1) {
					// 搜索服务
					data.is_type = 1
					recommendCommunity(data).then(res => {
						if(res.status == 200)
						{
							that.hotSearchList = that.hotSearchList.concat(res.data.list)
							that.loading = res.data.list.length >= that.limit;
							that.page++
						}
					}).catch(err=>{
						that.$util.Tips({title: err});
					})
				}
			}
		},
		// 滚动到底部
		onReachBottom() {
			this.searchBut();
		},
	}
</script>

<style>
	/* page {
		background-color: #fff;
	} */
</style>
<style lang="scss">
	.searchGood .search {
		background-color: #FFE103;
		padding: 26rpx 74rpx;
	}

	.searchGood .search .input {
		width: 602rpx;
		background-color: #fff;
		border-radius: 33rpx;
		padding: 0 0 0 35rpx;
		box-sizing: border-box;
		// height: 66rpx;
	}

	.searchGood .search .input input {
		// width: 472rpx;
		flex: 1;
		font-size: 28rpx;
	}

	.searchGood .search .input .placeholder {
		color: #bbb;
	}

	.searchGood .search .input .iconfont {
		color: #000;
		font-size: 35rpx;
	}

	.searchGood .search .bnt {
		// width: 120rpx;
		// text-align: center;
		// height: 66rpx;
		// line-height: 66rpx;
		// font-size: 30rpx;
		// color: #282828;
		width: 130rpx;
		height: 64rpx;
		background: #FFE103;
		border-radius: 32rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
		line-height: 64rpx;
		text-align: center;
		margin: 6rpx 6rpx 6rpx 0;
	}
	
	.tabNav {
		background-color: #fff;
		padding: 30rpx;
		display: flex;
		.tabNav-item {
			flex: 1;
			text-align: center;
			.tabNav-item-name {
				font-size: 34rpx;
				font-weight: 500;
				color: #323232;
				line-height: 48rpx;
				position: relative;
			}
			.on {
				font-size: 38rpx;
				font-weight: 500;
				color: #323232;
				line-height: 52rpx;
				&::after{
					content: '';
					transition: .5s;
					display: inline-block;
					width: 90%;
					height: 15rpx;
					background: url('http://ly.jukee.net/uploads/default/20230629/335f742a6bee3fdbc75d81c86c6ba350.png') center / contain no-repeat;
					position: absolute;
					left: 5%;
					bottom: -20rpx;
				}
			}
		}
	}
	.search-list-content {
		padding: 0 30rpx;
	}
	/* .searchGood .title {
		position: relative;
		font-size: 28rpx;
		color: #282828;
		margin: 50rpx 30rpx 25rpx 30rpx;

		.icon-shanchu {
			position: absolute;
			right: 0;
			top: 50%;
			transform: translateY(-50%);
			color: #999;
		}
	}

	.searchGood .list {
		padding: 0 10rpx;
		overflow: hidden;
	}

	.searchGood .list .item {
		font-size: 26rpx;
		color: #666;
		padding: 0 21rpx;
		height: 60rpx;
		background: rgba(242, 242, 242, 1);
		border-radius: 22rpx;
		line-height: 60rpx;
		margin: 0 0 20rpx 20rpx;
		max-width: 150rpx;
	}

	.searchGood .line {
		border-bottom: 1rpx solid #eee;
		margin: 20rpx 30rpx 0 30rpx;
	}

	.more-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 0 20rpx 20rpx;
		height: 60rpx;
		font-size: 24rpx;
		color: #999;

		.iconfont {
			font-size: 22rpx;
			margin-left: 10rpx;
		}
	} */
</style>
